import React from "react";
import './index.css';
import {Button,Input} from "antd";
import PriceTag from "../../../../Component/PriceTag";
import BGUtil from "../../../../utils/BGUtil"
import MessageUtil from "../../../../utils/MessageUtil";
import RedStar from "../../../../Component/RedStar"
import Protrait from "../../../../Component/Protrait";
import Blank from "../../../../Component/Blank";
import QuestionMark from "../../../../Common/svg/QuestionMark"
import DocumentSVG from "../../../../Common/svg/Document"
import Wedding from "../../../../Common/svg/Wedding";
import TradeServer from "../../../../Server/Trade/TradeServer";
import UserCheck from "../../../../utils/UserCheck";
import URL from "../../../../Server/URL";
import MessageManager from "../../../../utils/Message/MessageManager";

export default class extends React.Component{

    constructor(props){
        super();

        let id=props.match.params.id;

        this.state={
            id,
           hasPaied:false,
           price:0,
           address:"",
           time:"",
           require:"",
           travelExpense:"",
           details:"",
           title:"",
           shootingMoney:"",
           sellHeader:"",
           shootingAskFor:"",
           phone:"",
           canAccept:false,
           canCancel:false,

        }
        BGUtil.InitBG();
        MessageUtil.ShowSuspention("");

        this.Gen(id,0);
    }
    //0发单者 1接单者
    Gen(id,status){
        // UserCheck.GetUserID()
        // console.log(UserCheck.GetUserID())
        TradeServer.SendSellSelectSendSellDetails(id,status)
        .then(response=>{
            let data=response.data;
            let sellData=data.sendSell;

            this.setState({
                price:sellData.shootingMoney,
                address:sellData.shootingAddress,
                time:sellData.shootingTime,
                require:"",
                travelExpense:sellData.travelExpense,
                details:sellData.details,
                title:sellData.title,
                shootingMoney:sellData.shootingMoney,
                sellHeader:URL.GetURL(data.userHead),
                shootingAskFor:sellData.shootingAskFor,
                canCancel:sellData.status==="1" && sellData.receivingUserId===UserCheck.GetUserID(),
                canAccept:sellData.status==="0" && sellData.userId!==UserCheck.GetUserID(),
                phone:sellData.phone
            });
        })
    }
    componentDidMount(){
        MessageUtil.ChangeHeight();
    }
    render(){
        return(
            <div className="HireServiceOrderDetail_Container Courseware_Body">
                
                <div className="Courseware_Body HireServiceOrderDetail">
                    <div className="HireServiceOrderDetail flexContainer">
                        <span>
                            <span><Wedding/></span>
                            <span className="TradeDistribute_Title">{this.state.title}</span>
                        </span>
                        <Blank/>
                        <PriceTag currency={"￥"} price={this.state.price} />
                    </div>
                    <div>
                        <img src="/assets/AD/info.png" alt="info" className="TradeDistributeImg"/>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">拍摄地点</span>
                        <div className="Down_Input_Body">
                            <Input  value={this.state.address} disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">拍摄时间</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.time}  disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">拍摄要求</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.shootingAskFor}  disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">详情描述</span>
                        <div className="Down_Input_Body">
                            <Input value={this.state.details}  disabled={true}/>
                        </div>
                    </div>
                    <div className="UserInfo_Down_Input">
                        <span className="Down_Input_Title">差旅费</span>
                        <div className="Down_Input_Body">
                            <Input  value={this.state.travelExpense}  disabled={true}/>
                        </div>
                    </div>

                    <div className="flexContainer">
                        <Protrait src={this.state.sellHeader}/>
                        <Blank/>
                        {
                            !this.state.hasPaied?
                            <span><RedStar/><span>为保证交易双方的权益</span></span>:
                            <span>{this.state.phone}</span>
                        }
                    </div>

                    <div className="flexContainer" style={{display:this.state.hasPaied?"none":""}}>
                        <span>
                            <DocumentSVG/>
                        </span>
                        <span className="TradeDistribute_Title">接单保证金</span>
                        <Blank/>
                        <span>
                            <PriceTag currency={"￥"} price={this.state.shootingMoney} unitWithBar={<QuestionMark/>}/>
                            
                        </span>
                    </div>
                    <div style={{display:!this.state.canAccept?"none":""}} className="UserInfo_Down_Input">
                        <p>
                            sfjldjfkl
                        </p>
                    </div>
                    <div style={{display:!this.state.canAccept?"none":""}} className="HireServiceDetail_Bottom">
                        <a href={"/trade/distributePay/"+this.state.id} alt="pay">
                            <Button style={{width:"12rem"}} type="primary" shape="round" size="large">
                            支付保证金并接单
                            </Button>
                        </a>
                    </div>
                    <div style={{display:!this.state.canCancel?"none":""}} className="HireServiceDetail_Bottom">
                            <Button style={{width:"12rem"}} type="primary"
                             shape="round" size="large"
                             onClick={e=>MessageManager.ShowConfirmDestriDetailCancel(this.state.id)}>
                            取消接单
                            </Button>
                    </div>
                </div>
            </div>
        )
    }
}